<!-- 频道管理 -->
<template>
    <div class='bgff h100 pd pt10 dfgfdgtrt'>
        <p class="title-label">频道管理</p>
        <!-- :row-key="rowKey" -->
        <div class="mt20">
            <n-button type="primary" size="medium"
                @click="showModal = true; pupTitle = ''; pdid = ''; parentMenuCode = ''">新增</n-button>
        </div>
        <n-data-table :columns="columns" :data="Tabledata" default-expand-all class="mt10" :row-key="rowKey" />
        <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>{{ pdid?'修改': '新增' }}频道名称</div>
            </template>
            <div style="min-height:200px">
                <n-input v-model:value="pupTitle" type="text" placeholder="请输入频道名称" size="medium" clearable
                    @change=""></n-input>
            </div>
            <template #action>
                <div class="tr">
                    <n-button type="primary" size="medium" @click="pupSuccessBtn">确认</n-button>
                    <n-button class="ml10" @click="showModal = false"> 取消 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="showModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>绑定视频源</div>
            </template>
            <div style="min-height:200px">
                <n-input v-model:value="pcVideoSource" type="text" placeholder="pc视频源" size="medium" clearable></n-input>
                <n-input v-model:value="phoneVideoSource" type="text" placeholder="移动端视频源" size="medium" clearable class="mt20"></n-input>
            </div>
            <template #action>
                <div class="tr">
                    <n-button type="primary" size="medium" @click="pupSuccessBtner">确认</n-button>
                    <n-button class="ml10" @click="showModaler = false"> 取消 </n-button>
                </div>
            </template>
        </n-modal>


    </div>
</template>
<script lang='ts' setup>
import { ref, h } from "vue";
import { NButton } from "naive-ui"
import { callBack, dxpost, qurl, dxget, dxdel, dialog,TreeMenudx } from "../../util/index"
const apiUrl = 'jk/jkchannelmanagement' // api的地址
const showModal = ref(false) // 是否显示弹窗
const showModaler = ref(false)
const pdid = ref() // 频道id
const pupTitle = ref() // 弹窗的频道名称
const parentMenuCode = ref() // 父级id
const pcVideoSource = ref()
const phoneVideoSource = ref()
const columns = [
    // {
    //     type: 'selection'
    // },
    {
        title: '频道名称',
        key: 'title'
    },
    {
        title: '操作',
        width: 300,
        align: "center",
        render(row) {
            const jjhea = [h(
                NButton,
                {
                    type: "info",
                    quaternary: true,
                    onClick: () => {
                        pdid.value = ''
                        pupTitle.value = ''
                        parentMenuCode.value = row.id
                        showModal.value = true
                    }
                }, row.numer==1?'新增视频位置':'新增地点名称'
            )]
            let iserfa=  false
            iserfa = row.VideoSource||row.phoneVideoSource
            const jjheb = [h(
                NButton,
                {
                    type: "info",
                    quaternary: true,
                    onClick: () => {
                        pdid.value = ''
                        pupTitle.value = ''
                        parentMenuCode.value = row.id
                        showModaler.value = true
                        pcVideoSource.value = row.VideoSource
                        phoneVideoSource.value = row.phoneVideoSource
                    }
                }, (iserfa?'修改':'新增')+'视频频道路径'
            )]
            let metn = [h(
                NButton,
                {
                    type: "primary",
                    quaternary: true,
                    onClick: () => {
                        parentMenuCode.value = ''
                        pdid.value = row.id
                        pupTitle.value = row.title
                        showModal.value = true
                    }
                }, '编辑'
            ), h(
                NButton,
                {
                    type: "error",
                    quaternary: true,
                    onClick: async () => {
                        parentMenuCode.value = ''
                        const rye = await dialog("确认删除吗？")
                        if (rye != 1) {
                            return
                        }
                        const { errno }: any = await dxdel(apiUrl, { id: row.id })
                        if (errno == 0) {
                            window.$message.success("删除成功！")
                            initData()
                        }
                    }
                }, '删除'
            )]
            
            if(!row.isth){
                metn = [
                    ...jjhea,
                    ...metn
                ]
            }else{
                metn = [
                    ...jjheb,
                    ...metn
                ]
                
            }
            return metn
        }
    }
]
const Tabledata = ref([])
const initData = async () => {
    const { data }: any = await dxget(apiUrl)
    Tabledata.value = TreeMenudx(data) 
    console.log(JSON.stringify(Tabledata.value ));
}
initData()
const rowKey = (rowData) => {
    console.log(rowData.id);
    return rowData.id;
};
const pupSuccessBtn = async () => {
    if (!pupTitle.value) {
        window.$message.error("请输入频道名称")
        return
    }
    const isbj = pdid.value ? true : false
    const obj = { title: pupTitle.value }
    if (isbj) {
        obj["id"] = pdid.value
    }
    if (parentMenuCode.value) {
        obj['parentMenuCode'] = parentMenuCode.value
    }
    const { errno }: any = await dxpost(apiUrl, obj, isbj ? 'put' : "post")
    if (errno == 0) {
        window.$message.success("操作成功！")
        showModal.value = false
        initData()
    }
}
const pupSuccessBtner = async ()=>{
    const { errno }: any = await dxpost(apiUrl, {
        id:parentMenuCode.value,
        VideoSource:pcVideoSource.value,
        phoneVideoSource:phoneVideoSource.value
    },'put')
    if (errno == 0) {
        window.$message.success("操作成功！")
        showModaler.value = false
        initData()
    }
}

// rowKey: (row: RowData) => row.index
</script>
<style scoped>

</style>